<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <title>订单详情</title>
  <link rel="stylesheet" type="text/css" href="./css/webbase.css" />
  <link rel="stylesheet" type="text/css" href="./css/pages-getOrderInfo.css" />
  <link rel="stylesheet" type="text/css" href="./css/orderInfo.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .order-details {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .num{
      width: 100px;
      height: auto;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="orderApp">
    <div class="cart py-container">
      <div class="logoArea">
        <span>订单详情</span>
      </div>
      <div class="checkout py-container">
        <div class="checkout-tit">
          <h4 class="tit-txt">我的订单</h4>
        </div>
        <div class="checkout-steps">
          <!--收件人信息-->
          <el-collapse v-model="activeNames">
            <el-collapse-item title="订单详情" name="1">
              <div class="order-details">
                <div>
                  <p>订单号: {{ order.payOrderNo }}</p>
                  <p>下单时间: {{ order.createTime }}</p>
                  <p>总金额: ¥{{ order.totalAmount }}</p>
                </div>
                <div class="order-status">
                  <p>状态: {{ orderStatus(order.status) }}</p>
                  <el-button type="primary"@click="refund(order.orderId)" v-if="order.status !== 3 && order.status !== 4 && order.status !== 1 && order.status !== 6">申请退款</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>

          <!--支付和送货-->
          <div class="payshipInfo">
            <div class="step-tit">
              <h5>商品</h5>
            </div>
            <div class="step-cont">
              <ul class="send-detail">
                <li v-for="item in items" :key="item.id" class="sendGoods">
                  <div>
                    <ul class="yui3-g">
                      <li class="yui3-u-1-8">
                        <span><img :src="item.mainImage" width="100" height="100" /></span>
                      </li>
                      <li class="yui3-u-7-12">
                        <div class="desc">商品名称：</div>
                        <div>
                          <span>{{item.productName}}</span>
                        </div>
                      </li>
                      <li class="yui3-u-1-12">
                        <div>&nbsp;</div>
                        <div class="price">总金额：￥{{item.totalPrice}}</div>
                      </li>
                      <li class="yui3-u-1-12">
                        <div style="width: 60px; text-align: right">
                            <button class="num-btn" @click="incNum(item)" style="opacity: 0">+</button>
                          <div class="num">
                            <span style="font-size: x-small">数量</span>  &nbsp;&nbsp;&nbsp;<input style="width: 22px" type="text" v-model="item.quantity" disabled>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="order-summary">
        <div class="static fr">
          <div class="list">
            <span><i class="number">{{items.length}}</i>件商品</span>
<!--            <em class="allprice">¥{{totalPrice}}</em>-->
          </div>
        </div>
      </div>

      <div class="submit">
        <el-button type="primary"@click="backIndex()">返回首页</el-button>
      </div>
    </div>
  </div>
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="js/common.js"></script>
  <script>
    let orderApp = new Vue({
      el: "#orderApp",
      data() {
        return {
          util,
          items: [], // 商品信息
          params: {
            userId: 1,
            contact: '',
            mobile: '',
            country: '',
            state: '',
            city: '',
            street: '',
            zipCode: '',
            voList: [],
            paymentType: 3, // 支付方式
          },
          rules: {
            contact: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
            country: [{ required: true, message: '请输入国家', trigger: 'blur' }],
            state: [{ required: true, message: '请输入州/省', trigger: 'blur' }],
            city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
            street: [{ required: true, message: '请输入街道地址', trigger: 'blur' }],
            zipCode: [{ required: true, message: '请输入邮编', trigger: 'blur' }],
          },
          activeNames: ['1'], // 控制折叠面板的展开
          user: null,
          fullscreenLoading:false,
          disButton: false,
          order: {}
        }
      },
      created() {
        this.getItem();
      },
      methods: {
        async refund(id) {
          const res  = await this.$confirm('宝贝来之不易，您确定要申请退款吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            cancelButtonClass: 'custom-cancel-button',//添加样式，将确认与取消按钮调换位置
            type: 'warning',//设置弹框类型
            showCancelButton: true,  //是否显示取消按钮
            showClose: true, //是否显示右上角的x
            closeOnClickModal: true, //是否可以点击空白处关闭弹窗
          })
          if ('confirm' !== res ) {
            return
          }
          const resp = await axios.get('/order/applyRefund',{
            params: {orderId: id}
          })
          const { code ,msg } = resp
          console.log(code)
          if ( code != 200) {
            this.$message({
              type: 'error',
              message: msg
            })
            return
          }
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        },
        orderStatus(status) {
          const statusMap = {
            1: '待支付',
            2: '已支付',
            3: '已关闭',
            4: '已完成',
            5: '已报名',
            6: '退款中',
            7: '已退款'
          };
          return statusMap[status] || '未知状态';
        },
        async getItem() {
          const urlParams = new URLSearchParams(window.location.search);

          const orderId = urlParams.get('orderId');

          const res = await axios.get('/order/get',{
            params: {
              orderId: orderId
            }
          })

          this.order = res.data

          const itemRes = await axios.get('/order-items/page',{
            params: {
              pageNo: 1,
              pageSize: 9999,
              orderId: this.order.orderId
            }
          })
          this.items = itemRes.records
          console.log(this.items)
        },
        backIndex() {
          window.location.href = 'my-orders.html'
        },
        handleMobile(mobile) {
          return mobile.substring(0, 4) + "****" + mobile.substring(8, 11)
        },
        incNum(item) {
          if (item.num < item.stockQuantity) {
            item.num++
          }
        },
        decNum(item) {
          if (item.num > 1) {
            item.num--
          }
        },
        parseJson(str) {
          if (!str) {
            return "";
          }
          return JSON.parse(str);
        }
      },
      computed: {
        address() {
          return this.params.country + " " + this.params.state + " " + this.params.city
            + " " + this.params.street + " 收件人："
            + this.params.contact + " " + this.handleMobile(this.params.mobile);
        },
        totalPrice() {
          let total = 0;
          this.items.forEach(i => {
            total += ((i.price) * i.num)
          })
          // return util.formatPrice(total);
          return total
        }
      }
    });
  </script>
</body>

</html>